<template>
  <div style="overflow: hidden">
    <bread-crumb
        class="bread-crumb-padding"
        :list="breadCrumb"
        :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <accountTabList
          :list="tablist"
          :cidList="cidList"
          :cidSelect="cidSelect"
          @cidSelectChange="cidSelectChange"
      ></accountTabList>
      <div v-if='serverUpdate' class="serverUpdate">
        <div class="tips-area tips-icon flx-row-bw-c">
          <span>
              有1家{{ serverUpdate.type === 1 ? '注册局' : '站点' }}计划进行例行维护，请留意维护时间。如有不便，敬请谅解。
          </span>
          <div class="check-detail" @click="showServerUpdate = true">
            查看详情
          </div>
        </div>
      </div>
      <!-- <user-tab-list :list="tablist"></user-tab-list> -->
      <div class="searchbox-top filter-line b-b-d flx-row-s-c">
        <div class="left-filters flx-row-s-c">
          <div style="width: 100%" class="filter-line flx-row-s-c">
            <span class="item-name">域名状态</span>
            <span
                v-for="(item) in statusList"
                :key="item.value"
                class="select-item"
                :class="[item.value === status ? 'active' : 'normal']"
                @click="classifySelectEvent(item.value)"
            >
              {{ item.name }}
            </span>
          </div>
          <div class="right-toolbox flx-row-s-c">
            <div class="flx-row-s-c" style="margin-right: 20px">
              <span class="item-name" style="text-align: right">域名</span>
              <div class="wrapdmTextarea">
                <div class="textarea-warp" style="z-index: 200; top: 0;">
                  <Input class="ui-input dmTextarea" :class="dmName ? 'dmTyping' : ''" @on-focus="dmName = true"
                         @on-blur="changeDMName" v-model.trim="domain" type="textarea" placeholder="批量请换行分隔">
                    <template #suffix>
                      <Icon type="ios-search"/>
                    </template>
                  </Input>
                </div>
              </div>
            </div>
            <img v-if="!isShowSearch" class="filter-img" src="@/assets/images/filter.png" @click="showSearchFilters"/>
            <img v-else class="filter-img" src="@/assets/images/filter-active.png" @click="showSearchFilters"/>
          </div>
        </div>
      </div>
      <div v-if="isShowSearch">
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name" style="text-align: right">域名</span>
          <div class="wrapdmTextarea">
            <div class="textarea-warp" style="z-index: 200; top: 0;">
              <Input class="ui-input dmTextarea" :class="dmName ? 'dmTyping' : ''" @on-focus="dmName = true"
                     @on-blur="changeDMName" v-model.trim="domain" type="textarea" placeholder="批量请换行分隔">
                <template #suffix>
                  <Icon type="ios-search"/>
                </template>
              </Input>
            </div>
          </div>
          <span class="item-name">域名后缀</span>
          <Select v-model="domainSuffixs" style="width: 150px">
            <Option
                v-for="item in domainSuffixList"
                :value="item.suffix"
                :key="item.suffix"
            >{{ item.suffix }}
            </Option
            >
          </Select>
          <span class="item-name">交易状态</span>
          <Select v-model="tradingStatus" style="width: 150px">
            <Option
                v-for="(item) in tradingStatusList"
                :value="item.value"
                :key="item.value"
            >{{ item.name }}
            </Option
            >
          </Select>
          <span
              class="item-name"
              style="width: 100px; text-align: right"
          >注册时间</span
          >
          <DatePicker
              :editable="false"
              :value="createdTime"
              type="daterange"
              format="yyyy/MM/dd"
              placeholder=""
              placement="left-start"
              style="width: 210px"
              @on-change="
              (value) => {
                this.createdTime = value;
              }
            "
          ></DatePicker>
          <span class="item-name" style="text-align: right">过期时间</span>
          <DatePicker
              :editable="false"
              :value="expireTime"
              type="daterange"
              format="yyyy/MM/dd"
              placeholder=""
              placement="left-start"
              style="width: 210px"
              @on-change="
              (value) => {
                this.expireTime = value;
              }
            "
          ></DatePicker>


        </div>
        <div class="filter-line b-b-d flx-row-s-c">
          <template v-if="userId == ''">
            <div class="end-position">
                <span class="item-name"
                >模板</span
                >
              <div
                  class="c-d2 f-w-600 f-14 cursor-pointer"
                  v-if="selectTemplateName"
                  style="margin-right: 15px"
                  @click="templateSelectModalShow = true"
              >{{ selectTemplateName }}
              </div
              >
              <div
                  class="b-user-strong-button small-code-button cursor-pointer"
                  style="width: 150px"
                  @click="templateSelectModalShow = true"
                  v-else
              >
                点击选择
              </div>
            </div>
          </template>

          <!--          <div class="two-input-middle"></div>
                    <DatePicker
                      :editable="false"
                      :value="endCreatedTime"
                      type="date"
                      format="yyyy-MM-dd"
                      placeholder=""
                      style="width: 120px"
                      @on-change="
                        (value) => {
                          this.endCreatedTime = value;
                        }
                      "
                    ></DatePicker>-->

          <!--          <div class="two-input-middle"></div>
                    <DatePicker
                        :editable="false"
                        :value="endExpireTime"
                        type="date"
                        format="yyyy-MM-dd"
                        placeholder=""
                        style="width: 120px"
                        @on-change="
                        (value) => {
                          this.endExpireTime = value;
                        }
                      "
                    ></DatePicker>-->
          <div class="search-button">
            <div
                class="user-strong-button line-button-size"
                style="margin: 0 24px"
                @click="searchEvent"
            >
              搜索
            </div>
            <div
                class="user-normal-button line-button-size"
                @click="searchClearEvent"
            >
              重置
            </div>
          </div>
        </div>
        <!--        <div class="filter-line b-b-d flx-row-s-c searchbox-top">-->
        <!--          <div class="end-position">-->
        <!--            <span class="item-name">域名后缀</span>-->
        <!--            <Select v-model="domainSuffixs" style="width: 150px">-->
        <!--              <Option-->
        <!--                v-for="item in domainSuffixList"-->
        <!--                :value="item.suffix"-->
        <!--                :key="item.suffix"-->
        <!--                >{{ item.suffix }}</Option-->
        <!--              >-->
        <!--            </Select>-->
        <!--            <span class="item-name">交易状态</span>-->
        <!--            <Select v-model="tradingStatus" style="width: 150px">-->
        <!--              <Option-->
        <!--                  v-for="(item) in tradingStatusList"-->
        <!--                  :value="item.value"-->
        <!--                  :key="item.value"-->
        <!--              >{{ item.name }}</Option-->
        <!--              >-->
        <!--            </Select>-->
        <!--            <template v-if="userId == ''">-->
        <!--              <div class="end-position">-->
        <!--                <span class="item-name"-->
        <!--                >模板</span-->
        <!--                >-->
        <!--                <div-->
        <!--                    class="c-d2 f-w-600 f-14 cursor-pointer"-->
        <!--                    v-if="selectTemplateName"-->
        <!--                    style="margin-right: 15px"-->
        <!--                    @click="templateSelectModalShow = true"-->
        <!--                >{{ selectTemplateName }}</div-->
        <!--                >-->
        <!--                <div-->
        <!--                    class="b-user-strong-button small-code-button cursor-pointer"-->
        <!--                    @click="templateSelectModalShow = true"-->
        <!--                    v-else-->
        <!--                >-->
        <!--                  点击选择-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </template>-->
        <!--          </div>-->

        <!--        </div>-->
      </div>
    </div>

    <div class="user-main-box pub-m-t-20">
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-g f-14"
        >搜索结果共<span class="c-black"> {{ pageData.total }} </span>条</span
        >
      </div>
      <div style="overflow: hidden">
        <!-- 表格 -->
        <myDomainTable
            :list="domianList"
            :loading="tableLoading"
            :pageData="pageData"
            @pageChange="pageChange"
            @pageSizeChange="pageSizeChange"
            @renew="renew"
            @restore="restore"
            @pay="pay"
            @batchEvent="batchEvent"
            @autoRenew="setAutoRenew"
            :userId='userId'
        />
      </div>
    </div>
    <template-select-modal
        :show.sync="templateSelectModalShow"
        :tSelect="templateSelect"
        @check-submit="selectTemplateSubmit"
    ></template-select-modal>
    <pay-modal
        :show.sync="payModalShow"
        :sumPayable="redeemMoney"
        :orderNo="orderNo"
        @start-pay="startPay"
    >
      <div class="flx-row-bw-c">
        <span class="f-16 c-d2"
        >域名：<span class="f-18 f-w-600 c-o">{{ payName }}</span></span
        >
        <span class="f-16 c-d2"
        >赎回金额：<span class="f-18 f-w-600 c-r"
        >￥{{ redeemMoney }}</span
        ></span
        >
      </div>
    </pay-modal>
    <renewResultModal
        :show.sync="renewModalShow"
        title="续费提交结果"
        btn-title="前往购物车"
        :list="renewList"
        @confirm="renewResultConfirm"
    ></renewResultModal>
    <renewResultModal
        :show.sync="autoRenewModalShow"
        :title="autoRenewModalTitle"
        btn-title="确定"
        :list="autoRenewrenewList"
        @confirm="autoRenewrenewConfirm"
    ></renewResultModal>
    <submitAutoRenewModal
        ref="submitAutoRenewModal"
        title="操作验证"
        :show.sync="submitAutoRenewModalShow"
        @confirm="submitAutoRenewConfirm"
    />
    <!-- 设置DNS -->
    <settingsDNS :show.sync="settingsDNSModalShow" :domain-ids="domainIds"/>
    <!-- 例行维护公告 -->
    <Modal
        v-model="showServerUpdate"
        sticky
        :mask="false"
        :width="650"
        footer-hide
        title="例行维护公告"
    >
      <div v-if='serverUpdate' class="serverUpdate-wrap">
        <div class="serverUpdate-content">{{ serverUpdate.content }}</div>
        <div class="serverUpdate-info">
          <div class="serverUpdate-time">{{ serverUpdate.startTime }} - {{ serverUpdate.endTime }}</div>
          <div class="serverUpdate-item">维护机构：{{ serverUpdate.type === 1 ? 'CNNIC网关' : '站点' }}</div>
          <div class="serverUpdate-item">维护时间：{{ serverUpdate.startTime }} - {{ serverUpdate.endTime }}</div>
          <div class="serverUpdate-item" v-if='serverUpdate.type === 1'>影响域名：<span
              v-for="(item,index) in serverUpdate.suffix" :key="item">{{
              item
            }}{{ index === serverUpdate.suffix.length - 1 ? '' : '/' }}</span></div>
          <div class="serverUpdate-item">影响操作：新注、续费、转入、赎回、实名认证等服务</div>
        </div>
      </div>
    </Modal>
    <commonModal
        ref="remarkModal"
        :class-name="'remark-domain-modal'"
        :title="'批量备注'"
        :show.sync="showRemarkModal"
        :is-mask="false"
        :width="500"
        :closable="false"
        @confirmEvent="remarkConfirmEvent"
        @cancelEvent="remarkCancelEvent()"
    >
      <template #content>
        <div>
          <Input v-model="domainRemarkForm.remark" :rows="4" maxlength="150" type="textarea"
                 placeholder="请输入备注，最大150个字符"/>
        </div>
      </template>
    </commonModal>
  </div>
</template>

<script>
import {changelocation} from "@/utils/location.js";
import {domainTypes, domainSuffix} from "@/utils/publicData";
import templateSelectModal from "_c/modal/templateSelectModal/templateSelectModal.vue";
import accountTabList from "@/components/tabList/accountTabList";
import {
  domainPageList,
  domainExport,
  setPrivacy,
  autoRenew,
  setRemark
} from "@/api/bidding";
import myDomainTable from "_c/table/myDomainTable";
import {addToShoppingCart, domainRestoreCreate, getCid, serverUpdate} from "@/api/user";

const webScoketUrl =
    process.env.NODE_ENV === "development"
        ? // eslint-disable-next-line no-undef
        config2.webScoketUrl.dev
        : // eslint-disable-next-line no-undef
        config2.webScoketUrl.pro;
export default {
  name: "VipMydn",
  components: {
    myDomainTable,
    templateSelectModal,
    accountTabList,
    payModal: () => import("_c/modal/payModal/payModal.vue"),
    commonModal: () => import("_c/modal/commonModal"),
    renewResultModal: () => import("_c/modal/renewResultModal/renewResultModal"),
    submitAutoRenewModal: () => import("_c/modal/renewResultModal/submitAutoRenewModal"),
    settingsDNS: () => import("_c/modal/settingsDNS/settingsDNS"),
  },
  data() {
    return {
      dmName: false,
      breadCrumb: [
        {name: "管理中心"},
        {name: "域名管理"},
        {name: "我的域名"},
      ],
      tablist: [
        {
          name: "我的域名",
          to: "/user/mydn",
        },
      ],
      statusList: [
        {
          name: '全部域名',
          value: null
        },
        {
          name: '正常',
          value: 0
        },
        {
          name: '即将到期',
          value: 3
        },
        {
          name: '续费期',
          value: 4
        },
        {
          name: '赎回期',
          value: 5
        }
      ],
      status: null,
      waitingTime: [
        {
          name: "全部",
          select: true,
        },
        {
          name: "3月8日",
          select: false,
        },
        {
          name: "3月9日",
          select: false,
        },
        {
          name: "3月10日",
          select: false,
        },
      ],
      test: "",
      tradingStatus: null,
      tradingStatusList: [{
        name: '出售中',
        value: 1
      }, {
        name: 'PUSH中',
        value: 2
      }, {
        name: '转出中',
        value: 3
      }, {
        name: '预删除中',
        value: 4
      }],
      // 注册时间
      createdTime: [],
      compositionList: [],
      composition: [],
      domainCategory: "",
      domainStructure: "",
      // 自动续费
      autoRenew: -1,
      // 自动续费数据
      autoRenewList: ["未开启自动续费", "已开启自动续费"],
      // 过期开始时间
      expireTime: [],
      // 域名后缀
      domainSuffixs: null,
      // 域名后缀数据
      domainSuffixList: [],
      // 开始长度
      startLen: 0,
      // 结束长度
      endLen: 0,
      // 模板
      template: -1,
      // 模板数据
      templateList: [],
      // 搜索域名
      domain: "",
      // 开头结尾
      nameLike: [],
      // 表格加载状态
      tableLoading: false,
      // 域名列表
      domianList: [],
      // 请求参数
      pageData: {
        // 域名总数
        total: 0,
        // 页码
        page: 1,
        // 分页调试
        limit: 10,
      },
      templateSelect: null,
      selectTemplateName: "",
      templateSelectModalShow: false,
      // 弹框展示
      payModalShow: false,
      orderNo: "",
      payName: "",
      redeemMoney: 0,
      renewList: [],
      renewModalShow: false,
      autoRenewModalShow: false,
      autoRenewrenewList: [],
      autoRenewModalTitle: "设置自动续费结果",
      submitAutoRenewModalShow: false,
      settingsDNSModalShow: false,
      domainIds: [],
      selectAll: false, // 是否全选
      isStart: true,
      userId: "",
      cidSelect: "",
      cidList: [
        {
          username: "主账号",
          id: "",
        }
      ],
      serverUpdate: null,
      showServerUpdate: false,
      showRemarkModal: false,
      domainRemarkForm: {
        remark: '',
        domainIds: []
      },
      isShowSearch: false, // 默认关闭搜索框
    };
  },
  mounted() {
    const {tab} = this.$route.query;
    if (tab) {
      this.classifySelect = tab;
    }
    this.getCidList();
    this.getServerUpdate();
    this.getDomainTypes();
    this.getDomainSuffix();
    this.getDomainPageList();
  },
  methods: {
    changeDMName() {
      this.dmName = false;
      if (this.isShowSearch) return
      this.searchEvent()

    },
    showSearchFilters() {
      this.isShowSearch = !this.isShowSearch;
    },
    async remarkConfirmEvent() {
      if (!this.domainRemarkForm.remark || this.domainRemarkForm.remark === '') {
        return this.$Modal.warning("域名备注不能为空");
      }
      let res = await setRemark(this.domainRemarkForm);
      if (res.result) {
        this.$Message.success("设置成功！");
        this.showRemarkModal = false
        this.domainRemarkForm = {
          remark: '',
          domainIds: []
        }
        this.getDomainPageList();
      }
    },
    remarkCancelEvent() {
      this.showRemarkModal = false
      this.domainRemarkForm = {
        remark: '',
        domainIds: []
      }
    },
    // 获取子账号
    async getCidList() {
      const {code, data} = await getCid();
      if (code == 200) {
        this.cidList = this.cidList.concat(data);
      }
    },
    cidSelectChange(row) {
      this.cidSelect = row.index;
      this.userId = row.id;
      this.getDomainPageList();
    },
    // 获取例行维护公告
    async getServerUpdate() {
      const {code, data} = await serverUpdate();
      if (code == 200) {
        this.serverUpdate = data
      }
    },
    classifySelectEvent(val) {
      this.status = val;
      this.getDomainPageList();
    },
    // 选择模板
    selectTemplateSubmit(id, name) {
      this.templateSelect = id;
      this.selectTemplateName = name;
    },
    // 自定义显示格式
    format(labels) {
      const index = labels.length - 1;
      return labels[index];
    },
    // 获取选择域名类型
    async getDomainTypes() {
      let res = await domainTypes();
      this.compositionList = res;
    },
    // 级联选择器选择变化
    cascaderChange(value) {
      console.log(value)
      if (value != null && value.length > 0) {
        let temp = value[1].split("_");
        this.domainCategory = temp[0];
        this.domainStructure = temp[1];
      } else {
        this.domainCategory = "";
        this.domainStructure = "";
      }
    },
    // 获取域名后缀
    async getDomainSuffix() {
      let res = await domainSuffix();
      this.domainSuffixList = res;
    },
    // 获取列表
    async getDomainPageList() {
      let domain = this.domain.replace(/\n/g, ",");
      let params = {
        status: this.status
      };
      if (this.createdTime != null && this.createdTime.length > 0) {
        params.startCreatedTime = this.createdTime[0].replaceAll("/", "-")
        params.endCreatedTime = this.createdTime[1].replaceAll("/", "-")
      } else {
        params.startCreatedTime = null
        params.endCreatedTime = null
      }
      if (this.expireTime != null && this.expireTime.length > 0) {
        params.startExpireTime = this.expireTime[0].replaceAll("/", "-")
        params.endExpireTime = this.expireTime[1].replaceAll("/", "-")
      } else {
        params.startExpireTime = null
        params.endExpireTime = null
      }
      this.domainSuffixs && (params.domainSuffix = this.domainSuffixs);
      this.templateSelect && (params.templateId = this.templateSelect);
      this.domain && (params.name = domain);
      this.tradingStatus && (params.tradingStatus = this.tradingStatus);
      if (this.userId) {
        params.userId = this.userId;
      }
      params.page = this.pageData.page;
      params.limit = this.pageData.limit;
      this.tableLoading = true;
      const {code, data} = await domainPageList(params);
      this.tableLoading = false;
      if (code === 200 && data) {
        this.domianList = data.list
        this.pageData.total = data.total;
      }
    },
    // 批量续费
    async batchRenew(data) {
      this.tableLoading = true;
      const res = await addToShoppingCart({
        tradeNames: data,
        type: 1,
      });
      if (res.code === 200) {
        if (res.data.length === 0) {
          this.$Message.success("添加成功！");
          setTimeout(() => {
            let url = changelocation("/pro");
            window.open(url);
          }, 1000);
        } else {
          this.renewModalShow = true;
          this.renewList = res.data;
        }
      }
      this.getDomainPageList();
      this.tableLoading = false;
    },
    // 自动续费获取验证码成功
    submitAutoRenewConfirm(value) {
      this.batchAutoRenew(this.autoRenewIds, this.autoRenewType, value);
    },
    // 设置自动续费
    setAutoRenew(id, type) {
      this.autoRenewIds = [id];
      this.autoRenewType = type;
      // 打开短信验证码模态框
      this.submitAutoRenewModalShow = true;
    },
    // 续费结果模态框
    renewResultConfirm() {
      let url = changelocation("/pro");
      window.open(url);
    },
    autoRenewrenewConfirm() {
      this.autoRenewModalShow = false;
    },
    // 搜索确定事件
    searchEvent() {
      this.pageData.page = 1;
      this.getDomainPageList();
    },
    // 导出
    async exportData(ids) {
      let domain = this.domain.replace(/\n/g, ",");
      let params = {
        domainIds: ids,
        status: this.status
      };
      if (this.createdTime != null && this.createdTime.length > 0) {
        params.startCreatedTime = this.createdTime[0].replaceAll("/", "-")
        params.endCreatedTime = this.createdTime[1].replaceAll("/", "-")
      } else {
        params.startCreatedTime = null
        params.endCreatedTime = null
      }
      if (this.expireTime != null && this.expireTime.length > 0) {
        params.startExpireTime = this.expireTime[0].replaceAll("/", "-")
        params.endExpireTime = this.expireTime[1].replaceAll("/", "-")
      } else {
        params.startExpireTime = null
        params.endExpireTime = null
      }
      this.domainSuffixs && (params.domainSuffix = this.domainSuffixs);
      this.templateSelect && (params.templateId = this.templateSelect);
      this.domain && (params.name = domain);
      this.tradingStatus && (params.tradingStatus = this.tradingStatus);
      if (this.userId) {
        params.userId = this.userId;
      }
      params.page = this.pageData.page;
      params.limit = this.pageData.limit;
      this.tableLoading = true;
      const {code, data} = await domainExport(params);
      this.tableLoading = false;
      if (code === 200 && data) {
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(data); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
            "域名导出信息" + this.$moment().format("yyyy-MM-DD HH-mm"); //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },
    // 重置事件
    searchClearEvent() {
      this.composition = [];
      this.status = null;
      this.tradingStatus = null;
      this.domainCategory = null;
      this.domainStructure = null;
      this.createdTime = []
      this.expireTime = [];
      this.domainSuffixs = null;
      this.templateSelect = null;
      this.selectTemplateName = "";
      this.domain = "";
      this.page = 1;
      this.limit = 10;
      this.getDomainPageList();
    },
    // 表格分页事件
    pageChange(val) {
      this.pageData.page = val;
      this.getDomainPageList();
    },
    pageSizeChange(val) {
      this.pageData.limit = val;
      this.pageChange(1);
    },
    // 赎回
    async restore(domainName) {
      this.tableLoading = true;
      let res = await addToShoppingCart({
        tradeNames: [domainName],
        type: 3,
      });
      if (res.code === 200) {
        if (res.data.length === 0) {
          this.$Message.success("添加成功！");
          setTimeout(() => {
            let url = changelocation("/pro");
            window.open(url);
          }, 1000);
        } else {
          this.renewModalShow = true;
          this.renewList = res.data;
        }
      }
      this.tableLoading = false;
    },
    // 续费
    async renew(domainName) {
      this.tableLoading = true;
      let res = await addToShoppingCart({
        tradeNames: [domainName],
        type: 1,
      });
      if (res.code === 200) {
        if (res.data.length === 0) {
          this.$Message.success("添加成功！");
          setTimeout(() => {
            let url = changelocation("/pro");
            window.open(url);
          }, 1000);
        } else {
          this.renewModalShow = true;
          this.renewList = res.data;
        }
      }
      this.tableLoading = false;
    },
    // 批量自动续费 取消自动续费
    async batchAutoRenew(data, type, code) {
      this.tableLoading = true;
      const res = await autoRenew({
        code,
        ids: data,
        type,
      });
      if (res.code === 200) {
        if (res.data.length === 0) {
          this.$Message.success("操作成功！");
        } else {
          this.autoRenewModalTitle =
              type === 0 ? "设置自动续费结果" : "取消设置自动续费结果";
          this.autoRenewModalShow = true;
          this.autoRenewrenewList = res.data;
        }
      }
      this.$refs.submitAutoRenewModal.cancel();
      this.getDomainPageList();
      this.tableLoading = false;
    },
    // 批量操作事件
    batchEvent(index, value) {
      if (index === 20) {
        const data = value.map((o) => {
          return o.domainName;
        });
        this.batchRenew(data);
      } else if (index === 21 || index === 22) {
        this.autoRenewIds = value.map((o) => {
          return o.id;
        });
        this.autoRenewType = index === 21 ? 0 : 1;
        // 打开短信验证码模态框
        this.submitAutoRenewModalShow = true;
      } else if (index === 23) {
        // 批量设置DNS
        const data = value.map((o) => {
          return o.domainName;
        });
        this.$router.push({
          name: "batchDns",
          params: {dnList: data},
        });
      } else if (index === 24 || index === 25) {
        this.privacyIds = value.map((o) => {
          return o.id;
        });
        this.$Modal.confirm({
          title: `${index === 24 ? "开启隐私保护" : "关闭隐私保护"}`,
          content: `${
              index === 24 ? "是否开启隐私保护?" : "是否关闭隐私保护?"
          }`,
          onOk: async () => {
            const {code, data} = await setPrivacy({
              domainIds: this.privacyIds,
              isHide: index === 24 ? 1 : 0,
            });
            if (code === 200) {
              if (data.length === 0) {
                this.$Message.success("操作成功！");
              } else {
                this.autoRenewModalTitle =
                    index === 24 ? "开启隐私保护结果" : "关闭隐私保护结果";
                this.autoRenewModalShow = true;
                this.autoRenewrenewList = data;
              }
            }
            this.getDomainPageList();
          },
        });
      } else if (index === 26) {
        const data = value.map((o) => {
          return o.domainName;
        });
        this.$router.push({
          name: "dnsell",
          params: {dnList: data},
        });
      } else if (index === 27) {
        const data = value.map((o) => {
          return o.domainName;
        });
        this.$router.push({
          name: "dnpushform",
          params: {dnList: data},
        });
      } else if (index === 28) {
        let domainIds = value.map((o) => {
          return o.id;
        });
        this.exportData(domainIds)
      } else if (index === 29) {
        this.exportData([])
      } else if (index === 30) {
        this.showRemarkModal = true
        let domainIds = value.map((o) => {
          return o.id;
        });
        this.domainRemarkForm.domainIds = domainIds
        this.domainRemarkForm.remark = ''
      }
    },
    // 下单
    async pay(id) {
      this.tableLoading = true;
      let res = await domainRestoreCreate({domainId: id});
      if (res.code === 200 && res.result) {
        this.payName = res.data.domainName;
        this.redeemMoney = res.data.price;
        this.orderNo = res.data.orderNo;
        this.payModalShow = true;
        this.tableLoading = false;
      }
    },
    // 开始付款
    startPay() {
      if (this.isStart && this.$token.get()) {
        this.isStart = false;
        this.startSocket();
      }
    },
    // webScoket发送消息
    sendMessage(txt) {
      this.webSocket.send(txt);
    },
    // webScoket异常重连
    resetConnect() {
      this.connectCount = this.connectCount || 0;
      if (!this.webSocketInterval) {
        // console.log("开始webSocket重连");
        this.webSocketResetInterval = setInterval(() => {
          this.connectCount += 1;
          if (this.connectCount <= 5) {
            this.startSocket();
            this.webSocketResetInterval &&
            clearInterval(this.webSocketResetInterval);
          }
        }, 1000);
      }
    },
    // 开启webScoket
    startSocket() {
      this.messageTotal = 0;
      this.webSocket = new WebSocket(
          `${webScoketUrl}/web/webSocket/pay/${this.orderNo}/${this.$token.get()}`
      );
      // 接收消息事件
      this.webSocket.onmessage = (e) => {
        if (e.data === "open:suc") {
          this.sendMessage("start");
          this.heartInterval = setInterval(() => {
            if (this.messageTotal === 10) {
              this.sendMessage("heart");
              this.messageTotal = 0;
            }
            this.messageTotal += 1;
          }, 1000);
        }
        if (e.data.indexOf("msg:") != -1) {
          let message = e.data.split("msg:")[1];
          this.messageTotal = 0;
          let info = JSON.parse(message);
          if (info != null) {
            if (info.result == "true") {
              this.sendMessage("stop");
              this.payModalShow = false;
              this.$Modal.success("操作成功!");
              this.getDomainPageList();
              this.heartInterval && clearInterval(this.heartInterval);
            }
          }
        }
        if (e.data.indexOf("rec:stop") != -1) {
          this.webSocket.close();
        }
      };
      // 关闭事件
      // this.webSocket.onclose = () => {
      //   this.resetConnect();
      // };
      // 连接失败事件
      this.webSocket.onerror = () => {
        this.resetConnect();
      };
    },
  },
  beforeDestroy() {
    this.heartInterval && clearInterval(this.heartInterval);
    this.webSocketResetInterval && clearInterval(this.webSocketResetInterval);
  },
};
</script>
<style lang="scss" scoped>
/*/deep/ .ivu-input-type-textarea {
  textarea {
    height: 38px !important;
    line-height: 28px;
  }
}*/
/deep/ .ivu-input-wrapper {
  background: #fff;
}

/deep/ textarea.ivu-input {
  //  padding-top: 8px;
  min-height: 32px;
  background: #fff;
}

.serverUpdate {
  margin-top: 20px;

  .tips-icon {
    background-position: 15px;
  }

  .check-detail {
    border: 1px solid #F2632C;
    background: #F2632C;
    color: #fff;
    width: 110px;
    height: 28px;
    font-size: 14px;
    transition: color 0.3s;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 1;
    font-weight: 500;
  }
}

.mg-r-25 {
  margin-right: 25px;
}

.serverUpdate-wrap {
  padding: 20px;
  color: #333;

  .serverUpdate-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e8eaec;

    .serverUpdate-time {
      font-weight: bold;
      margin-bottom: 10px;
      position: relative;
      margin-left: 15px;

      &::before {
        position: absolute;
        top: 8px;
        left: -15px;
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #F2632C;
      }
    }

    .serverUpdate-item {
      margin: 5px 0 5px 15px;
    }
  }
}

.item-name {
  width: 100px;
  text-align: right;
}

.wrapdmTextarea {
  position: relative;
  height: 32px;
  width: 150px;

  .textarea-warp {
    //position: absolute;
    left: 0;
    right: 0;
    width: 150px;
    background-color: #fff;
  }

  .dmTextarea {
    height: 32px;
    width: 100%;
    line-height: 22px;
    padding: 0;
    font-size: 14px;
    border: 0;
    display: block;
    background-color: transparent;
    cursor: pointer;
    resize: none;
    outline: none;
    border-radius: 4px;
    font-family: inherit;
  }

  /deep/ .textarea-warp .ivu-input {
    height: 32px !important;
    line-height: 22px !important;
    background-color: #fff !important;
    z-index: 4;
  }

  /deep/ .textarea-warp .dmTyping .ivu-input {
    height: 180px !important;
  }
}

.searchbox-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.left-filters {
  width: 100%;
}

.filter-img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.end-position {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search-button {
  display: flex;
  flex-direction: row;
}

::v-deep .ivu-table:before {
  height: 0;
}
</style>
